<template>
  <a-card :bordered="false">
    <div class="card-title">{{ $route.meta.title }}</div>
    <div class="table-operator">
      <!-- 操作板块 -->
      <div class="row-item-tab clearfix">
        <a-button
            icon="plus"
            type="primary"
            @click="handleCreate()"
        >新增
        </a-button>
        <a-button @click="handleRefresh">重置</a-button>
      </div>
    </div>
    <s-table
        ref="table"
        :data="loadData"
        :loading="isLoading"
        :pageSize="15"
        :scroll="{ x: 1400, y: '420px', scrollToFirstRowOnChange: true }"
        rowKey="id"
    >
      <a-table-column key="userId" data-index="userId" title="用户编号"/>
      <a-table-column key="spuName" data-index="spuName" title="商品名字"/>
      <a-table-column key="price" data-index="price" title="支付价格">
        <template #default="text">
          {{ text | price }}
        </template>
      </a-table-column>
      <a-table-column key="refundPrice" data-index="refundPrice" title="退款金额">
        <template #default="text">
          {{ text | price }}
        </template>
      </a-table-column>

      <a-table-column key="creationTime" data-index="creationTime" title="创建时间">
        <template #default="text">
          <span>{{ text | moment }}</span>
        </template>
      </a-table-column>

      <a-table-column key="payOrderNo" data-index="payOrderNo" title="支付单号"/>
      <a-table-column key="payStatus" data-index="payStatus" title="是否支付">
        <template #default="text">
          {{ text ? '是' : '否' }}
        </template>
      </a-table-column>

      <a-table-column key="payTime" data-index="payTime" title="支付时间">
        <template #default="text">
          <span v-if="text">{{ text | moment }}</span>
        </template>
      </a-table-column>

      <a-table-column key="refundTime" data-index="refundTime" title="退款时间">
        <template #default="text">
          <span v-if="text">{{ text | moment }}</span>
        </template>
      </a-table-column>

      <a-table-column key="action" fixed="right" title="操作">
        <template #default="record">
        <span>
          <a v-if="!record.payStatus" class="mr-5" @click="handlePay(record)">前往支付</a>
          <a v-if="record.payStatus && !record.payRefundNo" class="mr-5" @click="handleRefund(record)">发起退款</a>
        </span>
        </template>
      </a-table-column>
    </s-table>
    <a-modal
        :confirmLoading="confirmLoading"
        :maskClosable="false"
        :visible="visible"
        :width="480"
        title="发起订单"
        @cancel="handleCancel"
        @ok="handleSubmit"
    >
      <a-spin :spinning="confirmLoading">
        <a-form :form="form">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="商品">
            <a-select
                v-decorator="[`spuId`]"
                placeholder="请选择下单商品"
            >
              <a-select-option value="1">华为手机</a-select-option>
              <a-select-option value="2">小米电视</a-select-option>
              <a-select-option value="3">苹果手表</a-select-option>
              <a-select-option value="4">华硕笔记本</a-select-option>
              <a-select-option value="5">蔚来汽车</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-spin>
    </a-modal>
  </a-card>
</template>

<script>
import * as Api from '@/api/pay/demo-order'
import {STable} from '@/components/Table'

export default {
  name: 'Index',
  components: {
    STable
  },
  data() {
    return {
      // 标签布局属性
      labelCol: {
        span: 7
      },
      // 输入框布局属性
      wrapperCol: {
        span: 13
      },
      // modal(对话框)是否可见
      visible: false,
      // modal(对话框)确定按钮 loading
      confirmLoading: false,
      // 当前表单元素
      form: this.$form.createForm(this),
      // 正在加载
      isLoading: false,
      // 加载数据方法 必须为 Promise 对象
      loadData: param => {
        return Api.page(param).then(response => response)
      }
    }
  },
  methods: {
    /**
     * 刷新列表
     * @param {Boolean} bool 强制刷新到第一页
     */
    handleRefresh(bool = false) {
      this.$refs.table.refresh(bool)
    },
    // 退款
    handleRefund(record) {
      const app = this
      const id = record.id
      const modal = this.$confirm({
        content: '是否确认退款编号为"' + id + '"的示例订单?',
        onOk() {
          return Api.refund(id)
              .then(() => {
                app.$message.success('发起退款成功！', 1.5)
                app.handleRefresh()
              })
              .finally(() => modal.destroy())
        }
      })
    },

    // 支付
    handlePay(record) {
      this.$router.push({
        name: 'PayCashier',
        query: {
          orderNo: record.payOrderNo,
          returnUrl: encodeURIComponent('/pay/demo/order?id=' + record.id)
        }
      })
    },

    // 新增记录
    handleCreate() {
      this.visible = true
      this.form.resetFields()
    },

    // 关闭对话框事件
    handleCancel() {
      this.visible = false
      this.form.resetFields()
    },

    // 提交表单
    handleSubmit(e) {
      e.preventDefault()
      // 表单验证
      const {form: {validateFields}} = this
      validateFields((errors, values) => {
        // 提交到后端api
        if (!errors) {
          this.confirmLoading = true
          const api = Api.submit(values)
          api.then(() => {
            this.$message.success('操作成功', 1.5)
            this.handleCancel()
            this.handleRefresh()
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    },
  }
}
</script>